<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>古诗词欣赏</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./index.css">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#8B4513',
            secondary: '#D2691E'
          },
          borderRadius: {
            'none': '0px',
            'sm': '2px',
            DEFAULT: '4px',
            'md': '8px',
            'lg': '12px',
            'xl': '16px',
            '2xl': '20px',
            '3xl': '24px',
            'full': '9999px',
            'button': '4px'
          }
        }
      }
    }
  </script>
  <style>
    body {
      font-family: 'Noto Serif SC', serif;
      min-height: 1024px;
      background-color: #f8f8f8;
    }

    .scroll-container {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .scroll-container::-webkit-scrollbar {
      display: none;
    }

    .card {
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: scale(1.02);
    }
  </style>
</head>

<body>
  <div class="w-[1280px] mx-auto">
    <header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
      <div class="w-[1280px] mx-auto px-6 h-16 flex items-center">
        <button class="text-primary hover:text-secondary transition-colors !rounded-button"
          onclick="location.href='../index/index.html'">
          <i class="fas fa-arrow-left text-xl"></i>
        </button>
        <h1 class="text-xl font-bold text-primary absolute left-1/2 -translate-x-1/2">古诗词欣赏</h1>
      </div>
    </header>
    <main class="pt-24 pb-12">
      <section class="mb-12">
        <h2 id="lxsg" class="text-primary text-xl font-bold mb-6" style="height: 50px;"> </h2>
        <div id="totalpoems" class="scroll-container grid overflow-x-visible pb-4">
          <!--  <div class="card flex-none w-[300px] bg-white rounded-lg shadow-md overflow-hidden">
            <img src="https://ai-public.mastergo.com/ai/img_res/d8c1f1769395fde04398f16c5281b52d.jpg"
              class="w-full h-[169px] object-cover" alt="山水画">
            <div class="p-4">
              <h3 class="font-bold text-lg mb-1">春晓</h3>
              <p class="text-gray-600">孟浩然</p>
              <p class="mt-2 text-gray-800">春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p>
            </div>
          </div>
          <div class="card flex-none w-[300px] bg-white rounded-lg shadow-md overflow-hidden">
            <img src="https://ai-public.mastergo.com/ai/img_res/0de78c7fbb39a53d455b0f7d25a9b330.jpg"
              class="w-full h-[169px] object-cover" alt="江南风景">
            <div class="p-4">
              <h3 class="font-bold text-lg mb-1">望庐山瀑布</h3>
              <p class="text-gray-600">李白</p>
              <p class="mt-2 text-gray-800">日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。</p>
            </div>
          </div>
          <div class="card flex-none w-[300px] bg-white rounded-lg shadow-md overflow-hidden">
            <img src="https://ai-public.mastergo.com/ai/img_res/4ff8eb471c5a6a7b68c5a82883741263.jpg"
              class="w-full h-[169px] object-cover" alt="秋景">
            <div class="p-4">
              <h3 class="font-bold text-lg mb-1">登鹳雀楼</h3>
              <p class="text-gray-600">王之涣</p>
              <p class="mt-2 text-gray-800">白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</p>
            </div>
          </div>
          <div class="card flex-none w-[300px] bg-white rounded-lg shadow-md overflow-hidden">
            <img src="https://ai-public.mastergo.com/ai/img_res/7ad6ae1126a49ffbc0f6ec468c297ded.jpg"
              class="w-full h-[169px] object-cover" alt="竹林">
            <div class="p-4">
              <h3 class="font-bold text-lg mb-1">咏竹</h3>
              <p class="text-gray-600">王维</p>
              <p class="mt-2 text-gray-800">碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。</p>
            </div>
          </div> -->
        </div>
      </section>
    </main>
  </div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="../../utils/auth.js"></script>
  <script src="../../utils/request.js"></script>
  <script src="./index.js"></script>
</body>

</html>